<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="teamForm.name" name="name" label="队伍名称" placeholder="请填写队伍名称"
          :rules="[{ required: true, message: '请填写队伍名称' }]" />
        <van-field v-model="teamForm.description" type="textarea" name="description" label="队伍描述" placeholder="请填写队伍描述"
          :min="3" :rules="[{ required: true, message: '请填写队伍描述' }]" />
        <van-field v-model="teamForm.expireTime" is-link readonly name="datePicker" label="时间选择" placeholder="点击选择时间"
          @click="showPicker = true" />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-date-picker :model-value="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field name="maxNum" label="最大人数">
          <template #input>
            <van-stepper v-model="teamForm.maxNum" :min="2" />
          </template>
        </van-field>
        <van-field name="status" label="单选框">
          <template #input>
            <van-radio-group v-model="teamForm.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-if="teamForm.status == 3" v-model="teamForm.password" name="password" label="密码"
          placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { addTeam, joinTeam } from '@/api/team';
import { showFailToast, showSuccessToast } from 'vant';
import { ref } from 'vue'
import { useRouter } from 'vue-router';

defineExpose({
  name: 'TeamList',
})
const router = useRouter()
/**
 * 初始表单数据
 */
const initFormData = {
  name: '',
  description: '',
  expireTime: '',
  maxNum: '',
  status: 0,
  password: '',
}
const teamForm = ref({ ...initFormData })
/**
 * 是否显示时间选择器
 */
const showPicker = ref(false);
const pickerValue = ref();
const onConfirm = (value: any) => {
  pickerValue.value = value;
  showPicker.value = false;
  teamForm.value.expireTime = value.selectedValues.join('-');
};
const onSubmit = async () => {
  const postData = {
    ...teamForm.value,
    status: Number(teamForm.value.status),
  }
  // joinTeam(params).then(res => {
  //   const { code, data } = res
  //   if (code === 200) {
  //     showSuccessToast('加入成功')
  //   } else {
  //     showFailToast('加入失败\n' + `${res.description}`)
  //   }
  // })
  await addTeam(postData).then(res => {
    console.log("res", res)
    const { code, data } = res
    if (code === 200) {
      showSuccessToast('创建成功')
      router.back()
    }
  })
}
</script>
